add profile

1 files changed, 83 insertions, 0 deletions

diff --git a/src/app/profile/[username]/page.tsx b/src/app/profile/[username]/page.tsx
new file mode 100644
index 0000000..cad11bb
--- /dev/null
+++ b/src/app/profile/[username]/page.tsx
@@ -0,0 +1,83 @@
+import Image from 'next/image';
+import { Button } from '@/components/ui';
+import { getUserByUsername } from '@/lib/api/user';
+import { User } from '@/lib/contexts/Auth.context';
+interface ProfilePageProps {
+    params: Promise<{ username: string }>;
+}
+
+export default async function Profile({ params }: ProfilePageProps) {
+    const { username } = await params;
+
+    const profileUser: User = await getUserByUsername(username);
+    const icons = [
+        'facebook',
+        'pinterest',
+        'discord',
+        'artstation',
+        'behance',
+        'instagram',
+    ] as const;
+
+    type IconKey = (typeof icons)[number];
+    return (
+        <>
+            <div className="flex gap-[20px] flex-col">
+                <div className="flex flex-col flex-start padding-0 gap-[20px] h-[551px] w-full">
+                    <div className="gradient-0 flex flex-end padding-[20px] gap-[10px] h-[350px] w-full rounded-[20px]"></div>
+                    <div className="flex flex-col flex-start gap-[10px] w-full h-[181px]">
+                        <div className="flex flex-col gap-1.25">
+                            <p className="font-medium text-[24px]">
+                                {profileUser.username}
+                            </p>
+                        </div>
+                        <div className="flex flex-row items-center gap-1.25 h-[19px]">
+                            <p>
+                                {profileUser.profile?.publications_count ?? 0}{' '}
+                                публикаций
+                            </p>
+                            <p>
+                                {profileUser.profile?.collections_count ?? 0}{' '}
+                                коллекций
+                            </p>
+                            <p>
+                                {profileUser.profile?.followers_count ?? 0}{' '}
+                                подписчиков
+                            </p>
+                            <p>
+                                {profileUser.profile?.following_count ?? 0}{' '}
+                                подписок
+                            </p>
+                        </div>
+                        <div className="flex max-w-[800px] font-regular text-[12px] gap-1.25">
+                            <p>{profileUser.description}</p>
+                        </div>
+                        <div className="flex flex-row flex-end gap-1.25">
+                            {icons
+                                .filter(
+                                    (icon: IconKey) =>
+                                        profileUser.integrations?.[icon],
+                                )
+                                .map((icon: IconKey) => (
+                                    <a
+                                        key={icon}
+                                        href={profileUser.integrations![icon]!}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                    >
+                                        <img
+                                            src={`/profile/${icon}.svg`}
+                                            alt={icon}
+                                            className="w-[30px] h-[40px]"
+                                        />
+                                    </a>
+                                ))}{' '}
+                        </div>
+                    </div>
+                </div>
+                <div className="flex flex-row space-between flex-start gap-1.25 w-full h-[42px]"></div>
+                <Button>Управление аккаунтом</Button>
+            </div>
+        </>
+    );
+}